<!DOCTYPE html>
<html lang="{{ with .Site.LanguageCode }}{{ . }}{{ else }}en-US{{ end }}">
    <head>
        {{ partial "head.html" . }}
        <script src="{{ .Site.BaseURL }}js/single-text-align.js"></script>
    </head>
    <body>
        <div class="wrapper">
            <div class="top-nav">
        		<img src="{{ .Site.BaseURL }}{{ .Site.Params.logo }}">
        		<h3><a href="{{ .Site.BaseURL }}{{ .Site.Params.button_3 }}" rel="me">{{ .Site.Title }}</a></h3>
                <text>·</text>
    			<a href="{{ .Site.BaseURL }}{{ .Site.Params.button_1 }}">Home</a>
    			<a href="{{ .Site.BaseURL }}{{ .Site.Params.button_2 }}">Playground</a>
    			<a href="{{ .Site.BaseURL }}{{ .Site.Params.button_3 }}" rel="me">About</a>
                <text>·</text>              
                    <a href="{{if .PrevInSection }}{{.PrevInSection.Permalink}}{{ else }}javascript:void(0);{{ end }}"
                        {{if not .PrevInSection }} style="color: gray !important; cursor: not-allowed;" {{ end }}>Prev</a>        
                    <a href="{{if .NextInSection }}{{.NextInSection.Permalink}}{{ else }}javascript:void(0);{{ end }}"
                        {{if not .NextInSection }} style="color: gray !important; cursor: not-allowed;" {{ end }}>Next</a>             
        	</div>

            <div class="side-nav">
                {{ partial "sidebar.svg" . }}
            </div>

        	<div class="article-header-container lin-gradient">
                <div class="article-header">
                    <div class="publish-date" style="margin-top: 10px;">
                        <h3>{{ .Date.Format "02" }}</h3></br>{{ .Date.Format "January" | upper }}
                    </div>
                    <h1>{{ .Title }}</h1>
                </div>
        	</div>
            <div class="article-meta-inf">
                <a href="{{ .Site.BaseURL }}{{ .Site.Params.button_3 }}" rel="me">by {{ .Site.Author.name }} </a>
                <text> &nbsp; · &nbsp; {{ .Date.Format "2006-01-02" }}</text>
                <text> &nbsp; · &nbsp; {{ .ReadingTime }} minutes reading time</text>
                <a href="javascript:void(0);">{{ partial "left.svg" . }}</a>
                <a href="javascript:void(0);">{{ partial "justify.svg" . }}</a>
            </div>
        	<div id="article-body">
        			{{ .Content }}
        	</div>

            {{ partial "footer.html" . }}
        </div>
    </body>
</html>